<template>
	<u-popup :show="show" @close="close" :safeAreaInsetBottom="false">
		<view class="px-4">
			<view class="flex justify-between items-center py-4 border-b-ee">
				<view class="flex items-center text-color-theme" @click="close">
					<u-icon name="arrow-left" color="#2d58cb"></u-icon>
					<text class="pl-1">取消</text>
				</view>
				<text class="text-gray-66">请选择</text>
				<text class="text-color-theme" @click="comfirm">确定</text>
			</view>
			<scroll-view :scroll-y="true" :style="{'height': contentHeight + 'px'}">
				<u-radio-group v-model="id" placement="column" @change="areaChange">
					<u-radio
					  v-for="(item,index) in dataList"
					  :customStyle="{padding: '16px 0px',borderBottom: index != (dataList.length - 1)? '1px dashed #eeeeee':'none'}"
					  :key="index"
					  :label="item.name"
					  :name="item.id"
					  labelSize="16" iconSize="20"
					  activeColor="#2d58cb"
					>
					</u-radio>
				  </u-radio-group>
			</scroll-view>
		</view>
	</u-popup>
</template>

<script>
	import {mapState} from 'vuex'
	import * as systemApi from '@/interface/common/system.js'
	export default {
		props: {
			value: {
				type: Boolean,
				default: false
			},
			contentHeight: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				id: '',
				text: '',
				show: false,
				dataList: []
			}
		},
		watch: {
			value: function (newVal) {
				if (newVal) this.show = newVal
			}
		},
		computed: {
			...mapState({
				system: state => state.system
			})
		},
		mounted() {
			if (this.system.areaId) {
				this.id = this.system.areaId
				this.text = this.system.areaName
			}
			systemApi.getAreaList().then(res=>{
				if (res.success) {
					this.dataList = [{id: '-1', name: '全部'}].concat(res.data)
				}
			})
		},
		methods: {
			close () {
				this.show = false
				this.$emit('input',false)
			},
			areaChange (id) {
				this.id = id
			},
			comfirm () {
				const v = this
				v.dataList.forEach(item=>{
					if (item.id == v.id) {
						v.text = item.name
					}
				})
				let o = {areaId: v.id, areaName: v.text}
				v.$store.commit("setArea", o)
				v.$emit("areaSelect", o)
				v.close()
			}
		}
	}
</script>

<style>

</style>
